<template>
	<view class="statistic">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<view class="statistic__title">
			总收益
		</view>
		<view class="statistic__tip">
			更新于:{{time}}
		</view>
		<view class="statistic__header">
			<view class="statistic__header-title">总收益(元)</view>
			<view class="statistic__header-money">{{benefitData.totolIncome}}</view>
			<view class="flex justify-between ">
				<view class="statistic__item">

					<view class="merchant-grid__title">交易收益</view>

					<view class="merchant-grid__value mt-20">{{benefitData.posProfile}}</view>
				</view>
				<view class="statistic__item">

					<view class="merchant-grid__title">流量卡收益</view>

					<view class="merchant-grid__value mt-20">{{benefitData.flowProfit}}</view>
				</view>
				<view class="statistic__item">

					<view class="merchant-grid__title">其他收益</view>

					<view class="merchant-grid__value mt-20">{{benefitData.otherProfit}}</view>
				</view>
				<view class="statistic__item">

					<view class="merchant-grid__title ">返现收益</view>

					<view class="merchant-grid__value mt-20">{{benefitData.activeProfit}}</view>
				</view>
			</view>

		</view>
		<benefitCharts></benefitCharts>


	</view>
</template>

<script>
	import benefitCharts from "./components/benefit-charts.vue";

	export default {
		components: {
			benefitCharts
		},
		data() {
			return {
				benefitData: {},
				time: {},

			}
		},
		mounted() {
			this.time = this.traversalTime(new Date().getTime());
			this.getIncomeStat()
		},
		methods: {
			getIncomeStat() {
				this.$zx.user_api.incomeStat().then((data) => {
					console.log("data=" + JSON.stringify(data))
					this.benefitData = data;


				});
			},
			traversalTime(timestamp) {
				//timestamp(时间戳)是整数，否则要parseInt转换
				let time = new Date(timestamp);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let mm = time.getMinutes();
				let s = time.getSeconds();
				return y + '-' + this.addTimes(m) + '-' + this.addTimes(d) + ' ' + this.addTimes(h) + ':' + this.addTimes(
					mm) + ':' + this.addTimes(s);


			},
			addTimes(m) {
				return m < 10 ? '0' + m : m
			},
		},
	}
</script>

<style scoped lang="scss">
	.statistic {
		width: 100vw;
		height: 100vh;
		position: relative;
		padding: 10rpx;

		&__title {
			font-weight: bold;
			margin-left: 20rpx;
		}

		&__tip {
			font-size: 11px;
			margin-left: 20rpx;

		}

		&__header {
			background-image: url(/static/image/benefit/img_trade_query_page_bg.png);
			background-size: 100% 100%;
			color: white;
			text-align: center;
			height: 348rpx;
			padding: 20rpx 30rpx;

		}

		&__header-title {
			margin-top: 30rpx;

		}

		&__header-money {
			margin-top: 30rpx;
			font-size: 22px;
			font-weight: bold;
			margin-bottom: 40rpx;
		}

		&__item {
			display: flex;
			flex-direction: column;
			font-size: 12px;

		}


	}
</style>